<template>
  <a-modal
    v-model:visible="visible"
    title="发布公告"
    okText="发布"
    cancelText="取消"
    @ok="handlePulish(map)"
    :loading="loading"
  >
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="{ pageSize: 3 }"
      :scroll="{ y: 240 }"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          <a>{{ text }}</a>
        </template>
      </template>
      <template #title>发布公告区域与物业电话</template>
    </a-table>
    <div>
      公告信息:
      <a-textarea
        v-model:value="noticevalue"
        placeholder="请输入需要发布公告信息!"
        allow-clear
      />
    </div>
  </a-modal>
</template>
<script setup>
import mitt from '@/mitt'
import { UseAnnounce } from '@/Hooks/UseAnnounce'
import { onUnmounted, reactive, ref } from 'vue'
const { map } = defineProps({
  map: {
    type: Object,
  },
})
const { data, visible, loading, handleClick, handlePulish, noticevalue } =
  UseAnnounce()
const columns = [
  {
    title: '区域名称',
    dataIndex: 'name',
  },
  {
    title: '物业电话',
    dataIndex: 'tel',
  },
]
//公告处理
const announceNotice = () => {
  handleClick(map)
}

mitt.on('announceNotice', announceNotice) //监听公告处理事件
onUnmounted(() => {
  mitt.off('announceNotice', announceNotice)
})
</script>

<style></style>
